Angular অ্যাপ্লিকেশন গুলোর মধ্যে মডুলার আর্কিটেকচার ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ। ফিচার মডিউলস হলো সেই মডিউলগুলো যেগুলি অ্যাপ্লিকেশনের নির্দিষ্ট ফিচার বা কার্যকারিতা (features) এর জন্য তৈরি হয়। এই মডিউলগুলো কম্পোনেন্ট, সার্ভিস, ডিরেক্টিভ, পাইপ ইত্যাদি উপাদানগুলিকে একত্রিত করে একটি নির্দিষ্ট ফিচার বা সেগমেন্টের জন্য।
ফিচার মডিউল ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনটি আরও স্কেলেবল, পুনরায় ব্যবহারযোগ্য এবং মেইনটেনেবল হয়। এটি বড় অ্যাপ্লিকেশন গুলোর জন্য একটি ভাল স্ট্রাকচার প্রদান করে, যেখানে প্রতিটি ফিচার বা কার্যকারিতা আলাদাভাবে কাজ করে।
ফিচার মডিউল তৈরি করতে Angular CLI ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, একটি User ফিচার মডিউল তৈরি করা:
ng generate module user
এটি user
নামে একটি নতুন মডিউল তৈরি করবে, যেটিতে কম্পোনেন্ট, সার্ভিস ইত্যাদি অন্তর্ভুক্ত করা যাবে।
একটি ফিচার মডিউল সাধারণত একটি নির্দিষ্ট ফিচারের জন্য সমস্ত উপাদান (কম্পোনেন্ট, সার্ভিস, ডিরেক্টিভ ইত্যাদি) সংগঠিত করে। একটি অ্যাপ্লিকেশন বা প্রধান মডিউলে ফিচার মডিউলটিকে import করতে হয়।
UserModule
ফিচার মডিউল user
এর মধ্যে বিভিন্ন কম্পোনেন্ট এবং সার্ভিস থাকতে পারে। প্রথমে user.module.ts
ফাইল তৈরি করা হবে:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';
import { UserService } from './user.service';
@NgModule({
declarations: [
UserComponent
],
imports: [
CommonModule
],
providers: [UserService],
exports: [UserComponent] // যদি অন্য মডিউলে ব্যবহারের জন্য এক্সপোর্ট করতে চান
})
export class UserModule { }
এখানে:
UserComponent
হলো user
ফিচারের কম্পোনেন্ট।UserService
হলো user
ফিচারের সার্ভিস।CommonModule
-এ Angular এর কমন ডিরেক্টিভস (যেমন ngIf
, ngFor
) অন্তর্ভুক্ত থাকে।import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UserModule } from './user/user.module'; // ফিচার মডিউল ইম্পোর্ট করা
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UserModule // এখানে ফিচার মডিউল যুক্ত করা হচ্ছে
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখানে, UserModule
কে AppModule
-এ অন্তর্ভুক্ত করা হয়েছে, যাতে UserComponent
এবং UserService
অ্যাপ্লিকেশনের অন্যান্য অংশে ব্যবহার করা যেতে পারে।
Angular-এ Lazy Loading ব্যবহার করে ফিচার মডিউল গুলো পেজ লোডের সময় অপ্রয়োজনীয় ফিচার মডিউল লোড না করে, যখন প্রয়োজন হবে তখন সেই মডিউল লোড করা হয়। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।
ফিচার মডিউলকে লেজি লোড করার জন্য রাউটিং কনফিগারেশন ব্যবহার করা হয়:
const routes: Routes = [
{ path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];
এখানে:
loadChildren
ব্যবহার করে Angular রাউটার নির্দেশ করে যে UserModule
কে তখনই লোড করতে হবে যখন /user
রাউটটি অ্যাক্সেস করা হবে।Read more